<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>系统日志</title>
    <link rel="stylesheet" type="text/css" th:href="@{/element-ui/lib/theme-chalk/index.css}"/>
    <link  th:href="@{/css/skin/login.css}" rel="stylesheet"/>
    <link  th:href="@{/css/other.css}" rel="stylesheet"/>
    <link  th:href="@{/css/dialog.css}" rel="stylesheet"/>
    <link th:href="@{/svg/iconfont.css}" rel="stylesheet"/>

</head>
<style>
    #updatePwdDialog .el-dialog__body{
        width: 600px;
        height: 300px;
        padding: 0 0 !important;
    }
    #updatePwdDialog .bodyDiv > div:first-child{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        padding-top: 25px;
        align-items: center;
    }
</style>
<body>
<span id="account" hidden th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.authorities[0]}"></span>
<span id="userName" hidden th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>
<div id="app" class="pd-20">
    <div>
        <div style="display: flex;" class="bg-iframe-bar">
            <div class="iframe-bar-el-row">
                <div>
                    <el-date-picker
                            v-model="form.datemin"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期时间"
                    >
                    </el-date-picker>
                    <el-date-picker
                            v-model="form.datemax"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期时间"
                    >
                    </el-date-picker>
                    <el-input
                            placeholder="用户名称或账号..."
                            v-model="form.keyword"
                            clearable>
                    </el-input>
                </div>
                <div v-if="role == 1 || role == 2">
                    <el-button id="queryBtn" type="primary"
                               @click="queryData()"
                    ><i class="iconfont ">&#xe639;</i>查询
                    </el-button>
                    <el-button id="queryBtn"
                               @click="resetForm()"
                    ><i class="iconfont ">&#xe628;</i>重置
                    </el-button>
                    <el-button id="exportBtn"
                               @click="exportData()"
                    ><i class="iconfont ">&#xe643;</i>导出
                    </el-button>
                    <el-button id="addBtn" type="primary" icon="el-icon-plus"
                               @click="addUserDialogOpen()"
                    >新建
                    </el-button>
                    <el-button id="exportBtn"
                               @click="uploadDialogOpen()"
                    ><i class="iconfont ">&#xe692;</i>导入
                    </el-button>
                </div>
            </div>
        </div>

        <div style="display: flex;" class="bg-iframe-tab">
            <template>
                <div style="display: flex;flex-direction:column;width: 100% !important;max-height:100%">
                    <el-table
                            ref="listData"
                            :data="listData"
                            v-loading="loading"
                            :header-cell-style="headStyle"
                            :cell-style="rowStyle"
                            :height="'70%'"
                            border
                            style="width: 100%">
                        <el-table-column type="index" label="序号" width="70" :index="typeIndex" :resizable="false"></el-table-column>
                        <el-table-column prop="userName" label="用户名称" width="150" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="account" label="登陆账号" width="130" :resizable="false"></el-table-column>
                        <el-table-column prop="createTime" label="创建日期" width="120" :formatter="dateFormat" sortable :resizable="false"></el-table-column>
                        <el-table-column prop="accountAttributes" label="用户角色" width="130" :resizable="false"></el-table-column>
                        <el-table-column prop="deptName" label="所属部门" width="120" :resizable="false"></el-table-column>
                        <el-table-column prop="sectionName" label="所属站段" width="140" :resizable="false"></el-table-column>
                        <el-table-column prop="workshop" label="所属车间" width="150" :resizable="false"></el-table-column>
                        <el-table-column prop="workArea" label="所属工区" width="240" :resizable="false"></el-table-column>
                        <el-table-column prop="" label="操作" :resizable="false">
                            <template  slot-scope="scope">
                                <template v-if="role != 2">
                                    <el-button  @click="updateUserOpen(scope.row)" class="btn-custom_1" style="width: 100px" >修改用户信息</el-button>
                                    <el-button  @click="updatePwdOpen(scope.row.id,scope.row.account)" class="btn-custom_1" style="width: 100px" >修改用户密码</el-button>
                                    <!--                                    <el-button hidden="true"  @click="resetPwd(scope.row.id,scope.row.account)" class="btn-custom_1" style="width: 60px"  >重置密码</el-button>-->
                                    <el-button v-if="role == 1" @click="openData(scope.row.id,scope.row.account,2)" class= "btn-custom_3" >删除</el-button>
                                    <!--                                    <el-tooltip class="item" effect="dark" content="修改用户信息" placement="top">-->
                                    <!--                                        <el-button size="mini" type="text" icon="el-icon-edit" @click="updateUserOpen(scope.row)"/>-->
                                    <!--                                    </el-tooltip>-->
                                    <!--                                    <el-tooltip class="item" effect="dark" content="重置用户密码" placement="top">-->
                                    <!--                                        <el-button size="mini" v-show="1==2" type="text" style="margin-left: 0px;" icon="el-icon-key" @click="updatePwdOpen(scope.row.id,scope.row.account)"/>-->
                                    <!--                                    </el-tooltip>-->
                                    <!--                                    <el-tooltip class="item" effect="dark" content="重置密码" placement="top">-->
                                    <!--                                        <el-button size="mini" type="text" hidden="true" style="margin-left: 0px;" icon="el-icon-key" @click="resetPwd(scope.row.id,scope.row.account)"/>-->
                                    <!--                                    </el-tooltip>-->
                                    <!--                                    <el-tooltip v-if="role == 1" class="item" effect="dark" content="删除" placement="top">-->
                                    <!--                                        <el-button size="mini" type="text" style="margin-left: 0px;" icon="el-icon-delete" @click="openData(scope.row.id,scope.row.account,2)"/>-->
                                    <!--                                    </el-tooltip>-->
                                    <!--                                    <el-tooltip v-else class="item" effect="dark" content="删除" placement="top">-->
                                    <!--                                        <el-button size="mini" disabled type="text" style="margin-left: 0px;" icon="el-icon-delete" @click="openData(scope.row.id,scope.row.account,2)"/>-->
                                    <!--                                    </el-tooltip>-->
                                </template>
                                <template v-else slot-scope="scope">
                                    <template v-if="scope.row.accountAttributes == '普通用户' || scope.row.accountAttributes != '管理员' || scope.row.account == userName">
                                        <el-button  @click="updateUserOpen(scope.row)" class="btn-custom_1" style="width: 100px" >修改用户信息</el-button>
                                        <el-button v-show="1==2"  @click="updatePwdOpen(scope.row.id,scope.row.account)" class="btn-custom_1" style="width: 100px" >重置用户密码</el-button>
                                        <el-button hidden="true"  @click="resetPwd(scope.row.id,scope.row.account)" class="btn-custom_1" style="width: 60px" >重置密码</el-button>
                                        <el-button v-if="scope.row.account != userName"  @click="openData(scope.row.id,scope.row.account,2)" class= "btn-custom_3" >删除</el-button>
                                        <el-button v-else disabled  @click="openData(scope.row.id,scope.row.account,2)" class= "btn-custom_3" >删除</el-button>

                                        <!--                                        <el-tooltip class="item" effect="dark" content="修改用户信息" placement="top">-->
                                        <!--                                            <el-button size="mini" type="text" icon="el-icon-edit" @click="updateUserOpen(scope.row)"/>-->
                                        <!--                                        </el-tooltip>-->
                                        <!--                                        <el-tooltip class="item" effect="dark" content="重置用户密码" placement="top">-->
                                        <!--                                            <el-button size="mini" v-show="1==2" type="text" style="margin-left: 0px;" icon="el-icon-key" @click="updatePwdOpen(scope.row.id,scope.row.account)"/>-->
                                        <!--                                        </el-tooltip>-->
                                        <!--                                        <el-tooltip class="item" effect="dark" content="重置密码" placement="top">-->
                                        <!--                                            <el-button size="mini" type="text" hidden="true" style="margin-left: 0px;" icon="el-icon-key" @click="resetPwd(scope.row.id,scope.row.account)"/>-->
                                        <!--                                        </el-tooltip>-->
                                        <!--                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">-->
                                        <!--                                            <el-button size="mini" type="text" style="margin-left: 0px;" icon="el-icon-delete" @click="openData(scope.row.id,scope.row.account,2)"/>-->
                                        <!--                                        </el-tooltip>-->
                                    </template>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin-top: 20px;margin-bottom:20px;width: 100%">
                        <el-pagination
                                background
                                style="float: right"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 25, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </template>

        </div>
    </div>

    <div>
        <el-dialog title="修改用户信息" class="dialogCss" :close-on-click-modal="false" :visible.sync="updateUserDialog" custom-class="updateUser-dialog">
            <div class="bodyDiv">
                <div>
                    <el-form id="updateUserForm" ref="updateUserForm" :model="updateUserForm" label-position="right" label-width="100px">
                        <el-form-item label="用户账号：">
                            <el-input v-model="updateUserForm.account" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="用户角色：" prop="accountAttributes">
                            <el-select v-model="updateUserForm.accountAttributes" placeholder="请选择用户角色">
                                <el-option v-for="item in accountAttributesOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户名称：" prop="userName">
                            <el-input v-model="updateUserForm.userName" placeholder="请输入用户名称"></el-input>
                        </el-form-item>
                        <el-form-item label="所属站段：" prop="sectionName">
                            <el-select v-show="updateUserShow.updateSectionNameShow" v-model="updateUserForm.sectionName" placeholder="请选择所属站段" @change="sectionNameSelectChange(updateUserForm.sectionName)">
                                <el-option v-for="item in sectionNameOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <el-input v-show="updateUserShow.updateSectionNameShow == false" v-model="updateUserForm.sectionName" style="width: 230px;" placeholder="请输入所属站段"></el-input>
                        </el-form-item>
                        <el-form-item label="所属车间：" prop="workshop">
                            <el-select v-show="updateUserShow.updateworkshopShow" v-model="updateUserForm.workshop" placeholder="请选择所属车间" @change="workshopSelectChange(updateUserForm.workshop)">
                                <el-option v-for="item in workshopOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <el-input v-show="updateUserShow.updateworkshopShow == false" v-model="updateUserForm.workshop" placeholder="请输入所属车间"></el-input>
                        </el-form-item>
                        <el-form-item label="所属工区：" prop="workArea">
                            <el-select v-show="updateUserShow.updateworkAreaShow" v-model="updateUserForm.workArea" placeholder="请选择所属工区" @change="workAreaSelectChange(updateUserForm.workArea)">
                                <el-option v-for="item in workAreaOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <el-input v-show="updateUserShow.updateworkAreaShow == false" v-model="updateUserForm.workArea" placeholder="请输入所属工区"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button @click="updateUserClose('updateUserForm')">取消</el-button>
                    <el-button type="primary" @click="updateUser('updateUserForm')">保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
    <el-dialog title="修改用户密码" id="updatePwdDialog" class="dialogCss" :close-on-click-modal="false" :visible.sync="updatePwdDialog">
        <div class="bodyDiv">
            <div>
                <el-form :model="updatePwdForm" ref="updatePwdForm" status-icon :rules="updatePwdRules"  label-position="right" label-width="100px">
                    <!--                    <div style="height: 30px;">当前登录的用户为：{{ updatePwdForm.updateAccount }}</div>-->
                    <el-form-item label="新密码：" prop="updatePwd">
                        <el-input type="password" v-model="updatePwdForm.updatePwd"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="checkPass">
                        <el-input type="password" v-model="updatePwdForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button @click="updatePwdClose('updatePwdForm')">取 消</el-button>
                <el-button type="primary" @click="updatePwd('updatePwdForm')">确 定</el-button>
            </div>
        </div>
    </el-dialog>
    <el-dialog title="新建账号" class="dialogCss" :close-on-click-modal="false" :visible.sync="addUserDialog" custom-class="updateUser-dialog">
        <div class="bodyDiv">
            <div>
                <el-form id="addUserForm" ref="addUserForm" :model="addUserForm" :rules="addUserRules" label-position="right" label-width="100px">
                    <el-form-item label="用户名称：" prop="userName">
                        <el-input v-model="addUserForm.userName" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="登录账号：" prop="account">
                        <el-input v-model="addUserForm.account" placeholder="请输入登入账号(英文/数字)..."></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input type="password" v-model="addUserForm.password"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="checkPass">
                        <el-input type="password" v-model="addUserForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户角色：" prop="accountAttributes">
                        <el-select v-model="addUserForm.accountAttributes" placeholder="请选择用户角色">
                            <el-option v-for="item in accountAttributesOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属站段：" prop="sectionName">
                        <el-select v-show="updateUserShow.updateSectionNameShow" v-model="addUserForm.sectionName" placeholder="请选择所属站段" @change="sectionNameSelectChange(addUserForm.sectionName)">
                            <el-option v-for="item in sectionNameOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-input v-show="updateUserShow.updateSectionNameShow == false" v-model="addUserForm.sectionName" style="width: 230px;" placeholder="请输入所属站段"></el-input>
                    </el-form-item>

                    <el-form-item label="所属车间：" prop="workshop">
                        <el-select v-show="updateUserShow.updateworkshopShow" v-model="addUserForm.workshop" placeholder="请选择所属车间" @change="workshopSelectChange(addUserForm.workshop)">
                            <el-option v-for="item in workshopOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-input v-show="updateUserShow.updateworkshopShow == false" v-model="addUserForm.workshop" placeholder="请输入所属车间"></el-input>
                    </el-form-item>
                    <el-form-item label="所属工区：" prop="workArea">
                        <el-select v-show="updateUserShow.updateworkAreaShow" v-model="addUserForm.workArea" placeholder="请选择所属工区" @change="workAreaSelectChange(addUserForm.workArea)">
                            <el-option v-for="item in workAreaOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-input v-show="updateUserShow.updateworkAreaShow == false" v-model="addUserForm.workArea" placeholder="请输入所属工区"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button @click="addUserClose('addUserForm')">取 消</el-button>
                <el-button type="primary" @click="addUser('addUserForm')">确 定</el-button>
            </div>
        </div>
    </el-dialog>

    <div>
        <batch-util
                :is-visible="uploadDialog"
                :up-url="uploadUrl"
                :exp-url="exportUrl"
                @cancel="uploadDialog=false"
        >
        </batch-util>
    </div>
</div>

</body>
<input id="ctxPath" th:value="${#httpServletRequest.getContextPath()}" hidden>
</html>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/vue/vue.js}"></script>
<script type="text/javascript" th:src="@{/vue/moment.min.js}"></script>
<script type="text/javascript" th:src="@{/element-ui/lib/index.js}"></script>
<script type="module" th:src="@{/templatesJs/systemControl/userList.js}" ></script>
